* {
    margin: 0;
    /*padding: 0;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: normal;
}
body {
    position: relative;
    font-family:Microsoft YaHei;
    min-width:1200px;
}
html, body {
    width: 100%;
    height: 100%;
}
ul{
    list-style: none;
}
a img {
    border: 0;
}
img {
    display: block;
}
a {
    text-decoration: none;
      font-size: 15px;
    color: #2a83c6;
}
em, i {
    font-style: normal;
}
.clearfix::after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.none {
    display: none !important;
}
input {
    border: none;
    outline: none;
}
::-moz-placeholder{color:#999;}              ã€€ã€€
::-webkit-input-placeholder{color:#999;}     
::-ms-input-placeholder{color:#999;}           
.container {
    position: relative;
    min-height: 100%;
    width:100%;
    overflow:hidden;
    background: #f5f5f5;
}
header {
    height: 50px;
    line-height: 50px;
    background: #343e46;
    z-index: 24;
}
header h3 {
    display: inline-block;
    width:126px;
    padding-left: 30px;
    font-size:24px;
    color:#fff;
}

.loginmask{ width:100%; height:100%; z-index:8; background:#000; position:fixed; top:0; left:0; display:none; }#loginalert{ width:440px; background:#fff; position:fixed; top:-600px; left:50%; margin-left:-220px; z-index:99; display:none; }.closealert{ width:20px; height:20px; cursor:pointer; background:url('icons.png') no-repeat -220px -315px;-webkit-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;transition:all 0.4s ease-out;}.closealert:hover{transform:rotate(-180deg);-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-o-transform:rotate(-180deg);}.loginwrap{ width:340px; margin:0 auto; }.loginh{ height:40px; margin-top:20px; }.loginh .fl{ font-size:30px; line-height:40px; color:#292929; }.loginh .fr{ font-size:18px; line-height:50px; color:#707070; }.loginh .fr a{ font-size:18px; line-height:50px; color:#FF4200; margin-left:5px; }.loginwrap h3{ font-size:14px; font-weight:500; height:20px; margin-top:15px; color:#292929 }.loginbtn{ line-height:70px; color:#6B6A6A; }.logininput input{ display:block; height:14px; line-height:14px; width:100%; border: #DAE2E5 1px solid; text-indent:10px; overflow:hidden; color:#979696; padding-top:13px; padding-bottom:13px; }.logininput .loginusername{ margin-top:15px; margin-bottom:10px; }.loginsubmit input{ width:130px; height:40px; line-height:40px; color:#fff; background:#70CA10; display:block; text-align:center; font-size:20px; border:none; font-family:'微软雅黑'; cursor:pointer; }.loginsubmit{ width:130px; height:40px; margin:15px 20px 0 0; position:relative; }.loginsubmiting{ height:40px; background:#fff; position:absolute; top:0; left:0; width:130px; opacity:0.8; filter:alpha(opacity=80); display:none; }.loginsubmiting_inner{ height:40px; background:url('loading.gif') no-repeat 50% 50%; width:130px; position:absolute; top:0; left:0; }.loginpd{ border-bottom:1px solid #ecf2f5; }
header ul {
    float: right;
}
header ul li {
    float: left;
    position: relative;
    padding: 0 20px;
    font-size: 14px;
    color:#fff;
    cursor: pointer;
}
header ul li:last-child {
    padding-right: 40px;
}
header ul li a {
    color:#fff;
}

header ul li .feedback {
    margin-right: 8px;
    margin-top: -4px;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;

}
header ul li .login-out {
    color:#55a8fd;
}
/* toastå¯®è§„î”*/
.toast-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 20px 15px;
  background: #1a2c38;
  color: #fff;
  border-radius: 6px;
  -ms-box-shadow: 0 5px 15px rgba(0,0,0,.5);
  -moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);
  -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
  z-index: 5000;
}

.nav {
    position:relative;
    padding: 0 126px;
    background: #343e46;
    box-shadow: 0 3px 10px #e6e6e6;
    color:#fff;
}
.nav-list {
    width:1200px;
    margin:0 auto;
    position: relative;
}
.nav-list .search-panel {
    float:right;
    margin-top: 14px;
    margin-right: 150px;   
    width: 340px;
}
.nav h3 {
    position:absolute;
    top: 0;
    left: 30px;
    width:170px;
    height:64px;
    line-height:64px;
    font-size:24px;
    color:#fff;
}
.nav .list {
    float:left;
    height:64px;
    margin: 0 auto;
}
.nav .list li {
    float: left;
    margin-left: 30px;
    margin-right: 52px;
    height:64px;
    line-height: 64px;
    color: #333;
    font-size: 20px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    text-align:center;
}
.nav ul li a {
    padding:0 5px;
    position:relative;
    color: #fff;
}
.nav ul li a label {
    position: absolute;
    font-size: 12px;
    background: #ff7800;
    color: #fff;
    padding: 0 6px 0 6px;
    border-radius: 2px;
    line-height: 16px;
    top: -10px;
    margin-left: 4px;
}
.nav ul li a label::before {
    content:'';
    position:absolute;
    width: 0;
    height: 0;
    border-top: 6px solid #ff7800;
    border-right: 6px solid transparent;
    position: absolute;
    left: 0;
    bottom:-4px;
}
.nav ul li.active, .nav ul li:hover {
    border-color:#55a8fd;
}
.nav ul li.active a, .nav .list li:hover a  {
    font-weight:bold;
}
ul li a > label {
    position:absolute
}
.user-info {
    position: fixed;
    top: 0;
    right:0;
    width: 150px;
    background: #fff;
    z-index: 33;

}
.user-shrink {
    position: relative;
    padding:0 6px;
    width: 100%;
    height: 64px;
    line-height:64px;
    background:#46545f;
    cursor:pointer;
}
.user-shrink > a > label {
    position:relative;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height:40px;
    border-radius: 20px;
    border:2px solid #fff;
    overflow:hidden;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
}
.user-shrink > a > label img {
    /*position: absolute;
    width: 50px;
    clip: rect(0px 40px 40px 0px);
    overflow: hidden;
    left: -5px;*/
    width: 100%;
    height:100%;
    display:none;
}
.user-shrink > span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    color: #fff;
}
.user-shrink > span.active::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius:3px;
    background: #ff7800;
    right: -8px;
    top: 50%;
    margin-top: -12px;
}
.user-shrink i {
    margin-top: 28px;
    width: 15px;
    height: 15px;
    position: relative;
    float: right;
}
.user-shrink.active i {
     margin-top: 24px;
}
.user-shrink i::before {
    content:'';
    position:absolute;
    right: 1px;
    width:7px;
    height:7px;
    border-right:1px solid #d0d0d0;
    border-bottom:1px solid #d0d0d0;
    transform:rotate(45deg);
}
.user-shrink.active i::before {
    transform:rotate(-135deg);
    top:50%;
}

.theme-blue .nav {
    background: #3c87df;
}
.theme-blue .user-shrink {
    background: #2d74c7;
}
.theme-blue .nav ul li.active, .theme-blue .nav ul li:hover {
    border-color: #fff;
}

.user-info ul {
    padding:10px 0 15px;
    box-shadow: -1px 1px 5px 1px rgba(204, 204, 204, .4);
}
.user-info ul li {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 12px;
    text-align: center;
    font-size: 14px;
}
.user-info ul li a {
    position:relative;
    color: #666;
}
.user-info ul li:last-child a{
    color:#55a8fd;
}
.user-info ul li a:hover {
    color:#55a8fd;
}
.user-info ul li a label {
    position: absolute;
    font-size: 12px;
    background: #ff7800;
    color: #fff;
    padding: 0 6px 0 6px;
    border-radius: 2px;
    line-height: 16px;
    top: -10px;
    margin-left: 4px;
}
.user-info ul li a label::before {
    content:'';
    position:absolute;
    width: 0;
    height: 0;
    border-top: 6px solid #ff7800;
    border-right: 6px solid transparent;
    position: absolute;
    left: 0;
    bottom:-4px;
}
.user-info .shrink {
    position: absolute;
    bottom: 20px;
    display: block;
    width: 100%;
    height: 26px;
    cursor: pointer;
}

.wrapper {
    position: absolute;
    padding-top:20px;
    width: 100%;
    top: 64px;
    bottom: 0;
    flex: 1;
    overflow: hidden;
}
    .wrapper > div:first-child {
        position: relative;
        min-height: 100%;
    }
.content-wrapper {
    width: 1186px;
    margin: 0 auto;
    padding-bottom: 106px;
}
.has-operate .content-wrapper {
    padding-top:8px;
}
.content-wrapper > p {
    position: relative;
    padding: 20px 0;
    width: 390px;
}
.search-box {
    position:relative;
}
.search-box input {
    width: 100%;
    height:36px;
    line-height: 36px;
    border-radius: 25px;
    padding-left: 14px;
    padding-right:42px;
    font-size: 14px;
}
.search-box input::-webkit-input-placeholder { 
    color:    #999;
}
.search-box input:-moz-placeholder { 
    color:    #999;
}
.search-box input::-moz-placeholder { 
    color:    #999;
}
.search-box input:-ms-input-placeholder { 
    color:    #999;
}
.search-box i {
    position: absolute;
    top: 10px;
    right:14px;
    width: 16px;
    height:16px;
    cursor: pointer;
}
.result-list {
    position:absolute;
    padding:8px 0;
    width: 350px;
    margin-top: 4px;
    background:#fff;
    box-shadow: 2px 3px 10px #aaa;
    z-index:11;
}
.result-list ul li a {
    display:block;
    padding:4px 20px;
}
.result-list ul li.on {
    background:#eee;   
}
.result-list ul li .name {
    font-size: 14px;
    color: #389fee;
}
.result-list ul li .path {
    color: #aaa;
    font-size: 12px;
}
.result-list ul li .no-data {
    font-size:14px;
    color: #389fee;
    text-align:center;
}
.content {
    padding: 26px 30px;
    padding-bottom:0;
    background: #fff;
}
.other {
    padding: 26px 30px; 
    padding-bottom: 10px;
}
.content .panel {
    position:relative;
    padding-bottom: 28px;
}
.content .panel:last-child {
    padding-bottom: 13px;
}
.content .user-define:last-child {
    padding-bottom:20px;
}
.panel h3 {
    position: relative;
    padding-bottom: 11px;
    font-size: 20px;
    color: #333;
    border-bottom: 1px solid #eee;
}
.panel h3 > img{
    float:left;
    width:18px;
    height:18px;
    margin-top:2px;
    margin-right:12px;
}
.panel h3 > a {
    position: absolute;
    right:0;
    color: #55a8fd;
    font-size: 14px;
    cursor: pointer;
}

/*.delete {
    margin-top: -4px;
    margin-left: 6px;
    display: inline-block;
    width: 14px;
    height:14px;
    vertical-align: middle;
    background: url(../../Images/OAMenu/delete.png) no-repeat center / 100%;
    cursor:pointer;
}*/

.panel ul li em {
    display: none;
}
.collect-wrap ul li em.edit {
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
    border-radius: 2px;
    position: absolute;
    top: 5px;
    right: 25px;
    opacity: .9;
    background: url() center center no-repeat;
}
.collect-wrap ul li em.edit:hover {
    opacity: .7;
}
.collect-wrap.user-define ul li span {
    width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    margin-top: 1px;
    min-width: 100px;
}
.delete {
    width: 18px;
    height: 18px;
    position: absolute;
    right: -6px;
    top: -3px;
    opacity: .9;
    cursor: pointer;
    border-radius: 50%;
    background: url() center center no-repeat;
}

.delete:hover {
    opacity: .7;
}
.user-define.collect-wrap ul li {
    padding-right: 49px;
}
.panel ul{
    padding-top: 13px;
}
.panel.user-define ul {
    width: 1152px;
}
.panel .one-line {
    height:40px;
    overflow:hidden;
    margin-bottom:10px;
}
.panel ul li {
    float: left;
    line-height:25px;
    margin-right: 29px;
    margin-bottom:10px;
    padding-left:29px;
    border: 1px dashed transparent;
}
.panel ul li span{
    position:relative;
    display:inline-block;
    /*min-width:120px;*/
   font-size:14px;
   color:#666; 
   cursor:pointer;
}
.content ul li span label {
    position: absolute;
    font-size: 12px;
    background: #ff7800;
    color: #fff;
    padding: 0 6px 0 6px;
    border-radius: 2px;
    line-height: 16px;
    top: -7px;
    margin-left: 4px;
}
.content .box ul li span label {
    top:-8px;
}
.content ul li span label::before {
    content:'';
    position:absolute;
    width: 0;
    height: 0;
    border-top: 6px solid #ff7800;
    border-right: 6px solid transparent;
    position: absolute;
    left: 0;
    bottom:-4px;
}
.panel ul li:hover a {
   color:#55a8fd;    
}
.user-define ul li:hover span {
   color:#666;    
}

.panel ul li a {
    color: #666;
}
.user-define ul li {
    margin-right: 12px;
    padding-right: 29px;
    border-color: #e6e6e5;
    position: relative;
}
.content-wrapper >  span {
    margin-right:30px;
    display: block;
    text-align: right;
    color: #55a8fd;
    font-size: 14px;
    float: right;
    margin-top: -23px;
}
.content-wrapper .addTo-common {
    cursor: pointer;
}
.content-wrapper >  span label {
    cursor: pointer;
}
.content-wrapper > span .return {
    opacity:0.7;
}
.content-wrapper >  span label + label {
    margin-left: 40px;
}
.content .box{
    padding-bottom:10px;
    border-bottom: 1px solid #eee;
}
.operate .content .box{
    padding-bottom:14px;
}
.content .box + .box {
    padding-top: 14px;
}
.operate .content .box + .box {
    padding-top: 20px;
}
.my-approval .panel::after {
    content:'';
    position:absolute;
    left:-30px;
    right:-30px;
    height:12px;
    background:#f5f5f5;
}
/*.my-approval .panel ul {
    border-bottom:1px solid #eee;
}*/
.content .box:last-child {
    border-bottom: 0;
}
.box h3 {
    position: relative;
    float: left;
    width: 108px;
    line-height: 30px;
    font-size: 16px;
    color: #333;
}
.box h3 > img{
    float: left;
    width: 18px;
    margin-top: 6px;
    margin-right: 11px;
}

.box ul {
    position:relative;
    margin-left: 138px;
}
.box ul::before {
    content: '';
    position: absolute;
    left: -30px;
    top:4px;
    bottom:10px;
    width:1px;
    background: #f6f6f6;
}
.box ul li {
    position: relative;
    float: left;
    margin-bottom: 6px;
    line-height: 30px;
}
.box ul li span {
    position: relative;
    margin-right: 13px;
    padding-right: 18px;
    display: block;
    min-width:152px;
    line-height: 26px;
    color: #666;
    font-size: 14px;
    border: 1px dashed transparent;
    cursor:pointer;
}
.box ul li:hover span {
    color: #55a8fd;
}
.box ul li i {
    display: none;
    width: 13px;
    height: 13px;
    margin: 0 10px;
}
.operate .box ul li i {
    display:inline-block;
}
.box ul li .new {
    position:absolute;
    right: -4px;
    top:-10px;
    width: 22px;
    height: 24px;

}
.user-define ul li span label {
    display:none;
}
.operate .my-approval .panel {
    display:none;
}
.operate ul li span label {
    display:none;
}
.operate ul .exist span, .operate ul .remove span{
    background: #55a8fd;
    color: #fff;
}

.box ul li:hover span {
    color: #55a8fd;
}
.operate ul .exist:hover span {
    color: #fff;
}
.operate ul .addable span{
    background: #fff;
    color: #55a8fd;
    border-color: #aad3fe;
}


footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #eae9e9;
    height:80px;
    color: #666;
}
footer > div {
    margin: 0 auto;
}
footer > div >  span {
    padding-left:30px;
    line-height:80px;
    font-size: 14px;
}
    footer ul {
        float:right;
        margin-top:11px;
    }
footer ul li {
    float:left;
    position:relative;
    margin-right:30px;
    font-size:12px;
    color:#5b7281;
    cursor:pointer;
}
footer ul li a {
    display:block;
}
.footer-menu .pic-wrap {
    margin: 0 auto;
    width:40px;
    height:40px;
    padding-top: 7px;
    background-color: #fff;
    border-radius: 50%;
}
.footer-menu .pic-wrap img {
    margin: 0 auto;
    width:26px;
    height:26px;
    display: block;
}
.footer-menu .pic-wrap img.light-pic {
    display: none;
}
footer ul li:hover .footer-menu .pic-wrap img {
    display: none;
}
footer ul li:hover .footer-menu .pic-wrap img.light-pic {
    display: block;
}
.footer-menu h4{
    margin-top:4px;
    font-size:12px;
    color:#5b7281
}
.others li > .pop-up {
    display: none;
    position: absolute;
    top:-171px;
    padding: 15px;
    box-shadow: 0px 4px 10px  #d7d7d7;
    background: #fff;
    font-size: 14px;
    color: #666;
    z-index: 22;
}
footer ul li:hover > .pop-up {
    display:block;
}
.others li > .pop-up::before {
    content:'';
    position: absolute;
    bottom:-8px;
    left:16%;
    border-left: 8px solid transparent;
    border-top: 8px solid #d7d7d7;
    border-right: 8px solid transparent;
}
.others li > .pop-up::after {
    content:'';
    position: absolute;
    bottom:-7px;
    left:16%;
    margin-left: 1px;
    border-left: 7px solid transparent;
    border-top: 7px solid #fff;
    border-right: 7px solid transparent;
}
.others li > .pop-up img {
    width: 130px;
    height: 130px;
}

.others li.contact .pop-up {
    width: 220px;
    padding: 20px;
    top:-138px;
}
.others li.contact .pop-up::before {
    left: 12px;
}
.others li.contact .pop-up::after{
    left: 12px;
}
.others li.contact:hover > .pop-up{
    display: block;
}
.others li.contact .pop-up a {
    display:block;
    color:#666;
    font-size:14px;
}
.others li.contact .pop-up a:hover {
    color:#55a8fd;
}
.others li.contact .pop-up a + a {
    margin-top:15px;
}
.others li.contact .pop-up p {
    margin-top:15px;
}

.back-old, .back-old-s {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    display: none;

}


@media screen and (min-width: 1100px)and (max-width: 1350px) {

    .user-info + .wrapper .content-wrapper {
        width:948px;
        margin: 0 auto;
        transition: all 0.3s ease-in-out;
    }
    .user-info.none + .wrapper .content-wrapper {
        margin: 0 auto;
        transition: all 0.3s ease-in-out;
    }
    .nav-list {
        width:948px;
    }
    .nav .list {
        width:570px;
    }
        .nav .list li {
            margin-right:30px;
        }
    .panel ul li {
        margin-right: 49px;
    }
    .user-define ul li {
        margin-right: 40px;
    }
    .box ul li span {
        margin-right: 24px;
    }
    .nav-list .search-panel {
        width:220px;
    }
    .nav-list .result-list {
        width:220px;
    }
    
    footer > div{
        width:948px;
    }    
}
@media screen and (min-width: 1350px)and (max-width: 1600px) {

    .user-info + .wrapper .content-wrapper {
        width:1024px;
        margin: 0 auto;
        transition: all 0.3s ease-in-out;
    }
    .user-info.none + .wrapper .content-wrapper {
        margin: 0 auto;
        transition: all 0.3s ease-in-out;
    }
    .nav-list {
        width:1024px;
    }
    .panel ul li {
        margin-right: 29px;
    }
    .user-define ul li {
        margin-right: 14px;
    }
    .box ul li span {
        margin-right: 13px;
    }
    footer > div{
        width:1024px;
    }
}
@media screen and (min-width: 1600px) {
    .content-wrapper {
        width:1200px;
        margin:0 auto;
    }
    .user-info {
        width:170px;
    }
    .user-shrink {
        padding:0 14px;
    }
    .user-shrink span {
        margin-left:4px;
        font-size:14px;
    }
    .nav-list {
        width:1200px;
    }
    footer > div{
        width:1200px;
    }
    .back-old {
        display: block;
    }
    .back-old-s {
        display: none;
    }
    .panel ul li span, .user-info ul li, .box ul li span {
        font-size: 15px;
    }
}
.dialog2-wrap .dialog2-body {
    padding: 40px 0 20px;
    text-align: center;
}
.dialog2-wrap .dialog2-footer {
    padding: 0;
    padding-bottom: 50px;
    border-top: 0;
    text-align: center;
    font-size: 14px;
}
.dialog2-wrap .dialog2-footer a {
    margin-left: 0;
    padding: 0 13px;
    line-height: 28px;
    background: #55a8fd;
    border-color: #55a8fd;
    border-radius: 3px;
}
.dialog2-wrap .dialog2-footer a:hover {
    background: #488fd7;
    border-color: #488fd7;
}

.collect-dialog2 .dialog2-body {
    padding: 0 30px;
    text-align: left;
}

.collect-dialog2 .dialog2-footer {
    padding: 15px 30px 30px;
    text-align: right;
    font-size: 14px;
}

.collect-dialog2 .dialog2-footer a {
    margin-left: 20px;
}

.collect-dialog2 .dialog2-footer a.default:hover {
    border-color: #c9c9c9;
}
.collect-dialog2 table { border-collapse: collapse; }
.collect-dialog2 table td { padding: 10px 0; }
.collect-dialog2 .c-title { font-size: 16px; color: #333; }
.collect-dialog2 .c-key { width: 105px; text-align: right; padding-right: 10px; font-size: 14px; color: #666;}
.collect-dialog2 .c-key span { color: #f15448; }
#sysName, #sysUrl { width: 290px; height: 32px; padding: 0 5px; line-height: 32px; border: 1px solid #ddd; border-radius: 4px;}
#sysUrl { height: 100px; outline: none; resize: none;}
#sysName:focus, #sysUrl:focus { border-color: #55a8fd; }
#sysName.ipt-err, #sysUrl.ipt-err { border-color: #f60; }

 @keyframes blur{
    from {
      filter: blur(0px);
    }
    to {
      filter: blur(100px);
    }
  }
.blur {
      position: relative;
      pointer-events: none;
  }
.blur > * {
    animation: blur 0.1s;
    animation-fill-mode: forwards;
}
.blur::after {
    content: '';
    display: block;
    position: fixed;
    left: 50%;
    top: 300px;
    margin-left: -30px;
    width: 60px;
    height: 60px;
    background-image: url('');
    background-size: contain;
}
.dialog2-open {
    padding-right: 0;
    overflow: inherit;
}

.sf-handle-wrap { width: 120px; border: 1px solid #4b5863; background-color: #242b31; font-size: 14px;
 position: absolute; right: 0; top: 13px; line-height: 24px; z-index: 3; border-radius: 25px;}
.sf-handle-wrap:hover { z-index: 4;}
.sf-handle-wrap > p { color: #fff; padding-left: 15px; position: relative; line-height: 36px;}
.sf-handle-wrap > p:before { width: 1px; height: 16px; background: #404d57; content: ""; display: block; position: absolute; right: 28px; top: 10px;}
.sf-handle-wrap > p:after { width: 10px; height: 10px; border-right: 2px solid #4a5964; border-bottom: 2px solid #4a5964; content: ""; display: block;
 position: absolute; right: 10px; top: 9px; transform: rotate(45deg) scale(.6); transition: all .2s ease-in;}
.sf-handle-wrap:hover > p:after { top: 13px; transform: rotate(-135deg) scale(.6);}
.sf-handle-wrap .sf-handle-cont { background: #242b31; position: absolute; left: 0; right: -1px; border: 1px solid #404d56;
    margin: -1px 0 0 -1px; border-radius: 0 0 3px 3px; display: none; box-sizing: content-box; padding: 5px 0 8px 10px;}
.sf-handle-wrap:hover { border-radius: 18px 18px 0 0; }
.sf-handle-wrap:hover .sf-handle-cont { display: block; border-radius: 0 0 25px 25px;}
.sf-handle-wrap .sf-handle-cont li { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.sf-handle-wrap .sf-handle-cont li > a { padding: 0 15px 0 7px; color: #9ab4cb; transition: all .1s ease-in;}
.sf-handle-wrap .sf-handle-cont li > a:hover { color: #ddd;}

.theme-blue .sf-handle-wrap { background-color: #306cb2; border-color: #619ce2; }
.theme-blue .sf-handle-wrap > p:before { background: #5389c9;}
.theme-blue .sf-handle-wrap > p:after { border-color: #5b96da;}
.theme-blue .sf-handle-wrap .sf-handle-cont { background: #306cb2; border-color: #629be2;}

.has-approve:after { width: 5px; height: 5px; border-radius: 50%; background: #ff7800; content: ""; display: inline-block; vertical-align: 6px; margin-left: -5px;}
#switchWrap.has-approve:after { position: absolute; right: 5px; top: 10px;}

